<script setup>
import {reactive, ref} from "vue";
import { useRouter } from 'vue-router';
import loginApi from "../api/loginApi.js";
import {tokenStore} from "../store/index.js";


const router = useRouter();

let member= ref({
  id:'',
  phone:'',
  name:'',
  balance:''
})
getMember()
function getMember(){
  loginApi.getMember().then(resp=>{
    if (resp.code===200){
      member.value=resp.data
    }else {
      alert(resp.msg)
    }
  })
}
const goToLogin = () => {
  router.push('/login');
}
function logout(){
  tokenStore().token=null
  localStorage.clear()
  router.push('/')
}
function tab(){
  tokenStore().token=null
  localStorage.clear()
  router.push('/login');
}
</script>
<template>
  <div class="my" style="height: 100%; background-color: #F5F5F5; padding: 20px 10px; color: #939393; font-size: 16px;">
    <ul class="infos" style="background-color: #FFF; border-radius: 10px; margin-bottom: 20px;">
      <li class="id clear" style="height: 60px; line-height: 60px; border-bottom: 1px solid #F5F5F5; padding: 0px 10px;">
        <div class="label left" style="float: left; font-size: 18px; color: #393939;">ID</div>
        <div class="info right" style="float: right;">{{member.id===''?'未登录':member.id}}</div>
      </li>
      <li class="phone clear" style="height: 60px; line-height: 60px; border-bottom: 1px solid #F5F5F5; padding: 0px 10px;">
        <div class="label left" style="float: left; font-size: 18px; color: #393939;">手机号</div>
        <div class="info right" style="float: right;">{{member.phone===''?'未登录':member.phone}}</div>
      </li>
      <li class="name clear" style="height: 60px; line-height: 60px; border-bottom: 1px solid #F5F5F5; padding: 0px 10px;">
        <div class="label left" style="float: left; font-size: 18px; color: #393939;">名字</div>
        <div class="info right" style="float: right;">{{member.name===''?'未登录':member.name}}</div>
      </li>
      <li class="balance clear" style="height: 60px; line-height: 60px; border-bottom: 1px solid #F5F5F5; padding: 0px 10px;">
        <div class="label left" style="float: left; font-size: 18px; color: #393939;">余额</div>
        <div class="info right" style="float: right;">{{member.balance===''?'未登录':member.balance}}</div>
      </li>
    </ul>
    <ul class="infos" style="background-color: #FFF; border-radius: 10px; margin-bottom: 20px;">
      <li class="login clear" style="height: 60px; line-height: 60px; border-bottom: 1px solid #F5F5F5; padding: 0px 10px;" v-if="member.id===''">
        <div class="label left" style="float: left; font-size: 18px; color: #393939; cursor: pointer;" @click="goToLogin">
          登录
        </div>
      </li>
      <li class="change clear" style="height: 60px; line-height: 60px; border-bottom: 1px solid #F5F5F5; padding: 0px 10px;" v-if="member.id!==''">
        <div class="label left" style="float: left; font-size: 18px; color: #393939;" @click="tab">切换账号</div>
      </li>
      <li class="logout clear" style="height: 60px; line-height: 60px; padding: 0px 10px;" v-if="member.id!==''">
        <div class="label left" style="float: left; font-size: 18px; color: #393939;" @click="logout">退出</div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.clear::after {
  content: '';
  display: block;
  clear: both;
}
</style>
